<template>
  <div class="container">
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-area
        :area-list="arryReceiveList"
        :value="area"
        class="arryReceiveList"
        @confirm="receiveconfirm"
        @cancel="receivecancel"
        @change="changeArea"
        :columns-num="3"
      />
    </van-popup>

    <van-nav-bar title="发货地址" fixed @click-left="onClickLeft">
      <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem" />
    </van-nav-bar>
    <div class="userinfo">
      <input type="text" placeholder="姓名" v-model="username" />
      <input class="phone" maxlength="11" type="tel" placeholder="电话" v-model="userphone" />
    </div>
    <div class="city" @click="city">
      <dl>
        <dt
          :style="receiveAddress.trim() == '' ? '#999999':'color:#000'"
        >{{receiveAddress.trim() == '' ? '请选择省市区' : receiveAddress}}</dt>
        <dd>
          <img src="@/assets/img/WechatIMG2.png" alt />
        </dd>
      </dl>
    </div>
    <div class="address">
      <input type="text" placeholder="详细信息" @click="addressClick" v-model="melinaddress" />
    </div>
    <div class="listOrder">
      <span @click="onRemove">清空当前信息</span>
    </div>
    <div class="box_added">
      <p class="tit">增值服务</p>
      <div class="checkSteper">
        <ul>
          <li
            :class="checkArr.filter(item => item == '需要提货').length ? 'active' : ''"
            @click="onclick('需要提货')"
          >需要提货</li>
          <li
            :class="checkArr.filter(item => item == '需要装车').length? 'active' : ''"
            @click="onclick('需要装车')"
          >需要装车</li>
          <li
            :class="checkArr.filter(item => item == '需要过磅').length? 'active' : ''"
            @click="onclick('需要过磅')"
          >需要过磅</li>
        </ul>
      </div>
      <!-- <van-cell title="请选择自提网点" is-link class="shell" /> -->
      <div class="warn" v-if="checkArr.filter(item => item == '需要提货').length">
        <p class="warn_title">期望上门时间</p>
        <div class="warn_count">
          <p @click="clickinput(1)">
            <input disabled type="text" :value="timerStart" placeholder="请选择开始时间" />
          </p>
          <p>—</p>
          <p @click="clickinput(2)">
            <input disabled type="text" :value="timerEnd" placeholder="请选择结束时间" />
          </p>
        </div>
      </div>
      <div class="warn" v-if="checkArr.filter(item => item == '需要提货').length">
        <p class="warn_title">最近营业部</p>
        <div class="borliner" @click="onclickBtn">{{ValLiner}}</div>
      </div>
    </div>
    <div class="box_added">
      <p class="tit">历史地址</p>
      <van-empty description="暂无数据" v-if="!shuerArr.length" />
      <ul v-if="shuerArr" class="uls">
        <dl v-for="(item,index) in shuerArr" :key="index" @click="dlClick(index)">
          <dt>
            <span>{{item.KaUabLinker}}</span>
            <span style="marginLeft: 10px">{{item.KaUabTel}}</span>
          </dt>
          <dd>
            <p>{{`${item.CITYNAME} ${item.AREANAME} ${item.KaUabDes} `}}</p>
          </dd>
        </dl>
      </ul>
    </div>
    <!-- <div class="popup-wrap"></div> -->
    <div class="buton">
      <van-button class="butonT" type="primary" size="large" @click="onOK">确定</van-button>
    </div>
    <van-popup v-model="mouseshow" position="bottom" :style="{ height: '40%' }">
      <van-picker
        item-height="44"
        show-toolbar
        title="营业部网点"
        :columns="dept"
        ref="toolbar"
        @confirm="onsubconfirm"
        @cancel="receivecancel"
      />
    </van-popup>
    <van-popup v-model="timeshow" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        :value="timeValue"
        v-model="currentDate"
        :min-date="minDate"
        :max-date="this.maxDate"
        @confirm="onConfirm"
        @change="onchange"
        ref="dataTime"
        type="dateime"
        title="期望上门时间"
        :columns-order="['year','month', 'day','hour', 'minute']"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import AreaList from "@/utils/area.js";
import {
  cities,
  areas,
  getKaUserAddressBook,
  operationadress,
  stations,
} from "@/api/add";
import {
  Area,
  Empty,
  Dialog,
  Toast,
  TreeSelect,
  Picker,
  DatetimePicker,
} from "vant";
Vue.use(DatetimePicker);
Vue.use(Picker);
Vue.use(Area);
Vue.use(Empty);
Vue.use(Dialog);
Vue.use(Toast);
Vue.use(TreeSelect);
import moment from "moment";
export default {
  data() {
    return {
      minDate: new Date(),
      timeValue: "",
      currentDate: new Date(),
      checkArr: ["需要提货"],
      show: false,
      mouseshow: false,
      timeshow: false,
      areaList: [],
      shuerArr: [],
      username: "",
      userphone: "",
      arryReceiveList: JSON.parse(JSON.stringify(AreaList)),
      ValLiner: "请选择",
      melinaddress: "",
      data: {
        modifyRemark: "",
      },
      receiveAddress: "",
      province: "110000000000",
      cityS: "110100000000",
      area: "110101000000",
      ind: null,
      receive: [],
      deptIdName: "",
      deptId: "",
      stationIdName: "",
      stationId: "",
      timeselect: {
        text: "两小时内",
        id: 0,
        time: 24,
      },
      timerStart: "",
      timerEnd: "",
      shrpLongitude: "",
      shrpLatitude: "",
      dept: [],
      inputData: null,
      timeok: ''
    };
  },

computed: {
    maxDate(){
      let curDate = (new Date()).getTime();
      let one = 3 * 24 * 3600 * 1000;
      let oneYear = curDate + one
      return new Date(oneYear);
    }
 },
  watch: {
    activeIndexTemp(newval) {
      let setdateDay = newval;

      let datestr = this.fundate(this.timeOffset ? setdateDay + 1 : setdateDay);

      this.pageTime = `${datestr}  ${this.timeselect.text}`;
    },
    timeselect() {
      let datestr = this.fundate(
        this.timeOffset ? this.activeIndexTemp + 1 : this.activeIndexTemp
      );

      this.pageTime = `${datestr}  ${this.timeselect.text}`;
    },
  },
  created() {
    this.getTime()
    if (JSON.parse(window.sessionStorage.getItem("deliver"))) {
      let rece = JSON.parse(window.sessionStorage.getItem("deliver"));
      this.username = rece.KaUabLinker;
      this.userphone = rece.KaUabTel;
      this.receiveAddress = `${rece.PROVINCENAME} ${rece.CITYNAME} ${rece.AREANAME}`;
      this.melinaddress = rece.KaUabDes;
      this.receive[0] = { name: rece.PROVINCENAME, code: rece.KaUabProvince };
      this.receive[1] = { name: rece.CITYNAME, code: rece.KaUabCity };
      this.receive[2] = { name: rece.AREANAME, code: rece.KaUabArea };
      this.deptId = rece.shortDeptId;
      this.deptIdName = rece.shortDeptName;
      this.stationId = rece.shortStationId;
      this.stationIdName = rece.KaAppointmentStart;
      this.timerStart = rece.KaAppointmentStart;
      this.timerEnd = rece.KaAppointmentEnd;
      this.checkArr = JSON.parse(
        window.sessionStorage.getItem("deliver_checkArr")
      ) || ["需要提货"];
      this.area = JSON.parse(
        window.sessionStorage.getItem("deliver")
      ).KaUabArea;
      this.province = JSON.parse(
        window.sessionStorage.getItem("deliver")
      ).KaUabProvince;
      this.cityS = JSON.parse(
        window.sessionStorage.getItem("deliver")
      ).KaUabCity;

      if (rece.shortDeptName && rece.shortStationName) {
        this.ValLiner = `${rece.shortDeptName} - ${rece.shortStationName}`;
      }
    }
    if (JSON.parse(sessionStorage.getItem("deliverClick"))) {
      let deliverClick = JSON.parse(sessionStorage.getItem("deliverClick"));
      this.username = deliverClick.KaUabLinker;
      this.userphone = deliverClick.KaUabTel;
      (this.deptId = deliverClick.shortDeptId),
        (this.stationId = deliverClick.shortStationId),
        (this.deptIdName = deliverClick.shortDeptName),
        (this.stationIdName = deliverClick.shortStationName);
      if (deliverClick.shortDeptName && deliverClick.shortStationName) {
        this.ValLiner = `${deliverClick.shortDeptName} - ${deliverClick.shortStationName}`;
      }
      if (
        deliverClick.PROVINCENAME &&
        deliverClick.CITYNAME &&
        deliverClick.AREANAME
      ) {
        this.receive[0] = deliverClick.PROVINCENAME
          ? {
              name: deliverClick.PROVINCENAME,
              code: deliverClick.KaUabProvince,
            }
          : {};
        this.receive[1] = deliverClick.CITYNAME
          ? { name: deliverClick.CITYNAME, code: deliverClick.KaUabCity }
          : {};
        this.receive[2] = deliverClick.AREANAME
          ? { name: deliverClick.AREANAME, code: deliverClick.KaUabArea }
          : {};
      }

      this.receiveAddress = `${deliverClick.PROVINCENAME} ${deliverClick.CITYNAME} ${deliverClick.AREANAME}`;
      this.area =
        deliverClick.KaUabArea != "" ? deliverClick.KaUabArea : "110101000000";
      this.cityS =
        deliverClick.KaUabCity != "" ? deliverClick.KaUabCity : "110100000000";
      this.province =
        deliverClick.KaUabProvince != ""
          ? deliverClick.KaUabProvince
          : "110000000000";
      this.timerStart = deliverClick.KaAppointmentStart;
      this.timerEnd = deliverClick.KaAppointmentEnd;
      this.shrpLongitude = deliverClick.shrpLongitude;
      this.shrpLatitude = deliverClick.shrpLatitude;
      this.melinaddress = deliverClick.KaUabDes;
    }

    if (JSON.parse(window.sessionStorage.getItem("FAddress"))) {
      let Faddress = JSON.parse(window.sessionStorage.getItem("FAddress"));
      this.melinaddress = Faddress.address;
      this.shrpLongitude = Faddress.longitude;
      this.shrpLatitude = Faddress.latitude;
      this.province = Faddress.pcode;
      this.cityS = Faddress.citycode;
      this.area = Faddress.adcode;
      this.receive[0] = { name: Faddress.pname, code: Faddress.pcode };
      this.receive[1] = { name: Faddress.cityname, code: Faddress.citycode };
      this.receive[2] = { name: Faddress.adname, code: Faddress.adcode };
      this.receiveAddress = `${Faddress.pname} ${Faddress.cityname} ${Faddress.adname}`;
    } else if (window.sessionStorage.getItem("FAddressVal")) {
      this.melinaddress = window.sessionStorage.getItem("FAddressVal");
      this.shrpLongitude = "";
      this.shrpLatitude = "";
    }

    this.melinaddress;

    console.log(this.checkArr);
    // 回显历史地址
    getKaUserAddressBook({
      addressType: 1,
      searchTxt: "",
      userId: this.$router.history.current.query.kauserId,
    }).then((res) => {
      this.shuerArr = res.data;
    });
  },
  mounted() {
    if (
      JSON.parse(
        sessionStorage.getItem("feed") &&
          JSON.parse(sessionStorage.getItem("feed")).TabArr[0] == "精拼报价"
      )
    ) {
      if (this.checkArr.filter((item) => item == "需要提货")) {
        this.checkArr.push("需要提货");
      }
    }
    stations().then((res) => {
      let arr = [];
      let newArr = [];
      res.data.forEach((item) => {
        newArr = [];
        item.children.forEach((items) => {
          newArr.push({
            text: items.stationName,
            stationX: items.stationX,
            stationY: items.stationY,
            stationId: items.stationId,
          });
        });
        arr.push({
          text: item.deptName,
          deptId: item.deptId,
          children: newArr,
        });
      });
      this.dept = arr;
    });
  },
  methods: {
    onConfirm(val){
      console.log(val)
      if(this.timeok!= ''){
        if(this.inputData == 1){
        this.timerStart = moment(this.timeok).format("YYYY-MM-DD HH:mm:ss")
      } else if(this.inputData == 2){
        this.timerEnd = moment(this.timeok).format("YYYY-MM-DD HH:mm:ss")
      }
      } else {
        if(this.inputData == 1){
        this.timerStart = moment(val).format("YYYY-MM-DD HH:mm:ss")
      } else if(this.inputData == 2){
        this.timerEnd = moment(val).format("YYYY-MM-DD HH:mm:ss")
      }
      }
      
      this.timeshow = false;
    },
    getTime(){
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let h = date.getHours()
      let min = date.getMinutes()
      if (m >= 1 && m <= 9) { m = `0${m}` }
      if (d >= 1 && d <= 9) { d = `0${d}` }
      if (h >= 0 && h <= 9) { h = `0${h}` }
      if (min >= 0 && min <= 9) { min = `0${min}` }
      let time = `${y}-${m}-${d} ${h}:${min}:00`
      this.timeValue = time
      // console.log(time)
    },
    onchange(val){
     this.timeok = `${val.getValues()[0].split('年')[0]}-${val.getValues()[1].split('月')[0]}-${val.getValues()[2].split('日')[0]} ${val.getValues()[3].split('时')[0]}:${val.getValues()[4].split('分')[0]}`
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      if(type === 'hour') {
        return val + '时';
      }
      if(type === 'minute') {
        return val + '分';
      }

      return val;
    },
    clickinput(data) {
      this.timeshow = true;
      this.inputData = data;
    },
    onRemove() {
      this.cityS = "";
      this.area = "";
      this.province = "";
      this.ind = null;
      this.checkArr = ["需要提货"];
      this.userphone = "";
      this.username = "";
      this.melinaddress = "";
      this.receiveAddress = "";
      this.receive = []
      sessionStorage.removeItem("deliverClick");
      sessionStorage.removeItem("FAddressVal");
    },
    addressClick() {
      console.log(this.receive);
      window.sessionStorage.setItem(
        "deliverClick",
        JSON.stringify({
          KaUabLinker: this.username,
          KaUabTel: this.userphone,
          PROVINCENAME: this.receive.length ? this.receive[0].name : "",
          CITYNAME: this.receive.length ? this.receive[1].name : "",
          AREANAME: this.receive.length ? this.receive[2].name : "",
          KaUabArea: this.area,
          KaUabCity: this.cityS,
          KaUabDes: this.melinaddress,
          KaUabProvince: this.province,
          KaAppointmentStart: this.timerStart,
          KaAppointmentEnd: this.timerEnd,
          shrpLongitude: this.shrpLongitude,
          shrpLatitude: this.shrpLatitude,
          shortDeptId: this.deptId || "",
          shortStationId: this.stationId || "",
          shortDeptName: this.deptIdName || "",
          shortStationName: this.stationIdName || "",
        })
      );
      window.sessionStorage.setItem(
        "deliver_checkArr",
        JSON.stringify(this.checkArr)
      );
      let obj = this.$router.history.current.query;
      obj.flag = 1;
      this.$router.push({
        path: "/inputAddress",
        query: obj,
      });
    },
    onclickBtn() {
      this.mouseshow = true;
      let arr = [0, 0];
      this.dept.forEach((item, index) => {
        console.log(this.stationId);
        if (item.deptId == this.deptId) {
          arr[0] = index;
          item.children.forEach((items, indexs) => {
            if (items.stationId == this.stationId) {
              arr[1] = indexs;
            }
          });
        }
      });
      setTimeout(() => {
        this.$refs.toolbar.setIndexes(arr);
      }, 1);
    },
    // 计算明天的日期
    fundate(aa) {
      let date = new Date();

      date.setDate(date.getDate() + aa);
      let y = date.getFullYear();

      let m =
        date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1;

      let d = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();

      let time = `${m}-${d}`;

      return time;
    },
    onClickLeft() {
      sessionStorage.removeItem("deliverClick");
      sessionStorage.removeItem("FAddress");
      this.$router.back();
    },
    onsubconfirm(val) {
      this.deptId = this.dept[this.$refs.toolbar.getIndexes()[0]].deptId;
      this.stationId = this.dept[this.$refs.toolbar.getIndexes()[0]].children[
        this.$refs.toolbar.getIndexes()[1]
      ].stationId;
      this.deptIdName = this.dept[this.$refs.toolbar.getIndexes()[0]].text;
      this.stationIdName = this.dept[
        this.$refs.toolbar.getIndexes()[0]
      ].children[this.$refs.toolbar.getIndexes()[1]].text;
      console.log(
        this.dept[this.$refs.toolbar.getIndexes()[0]].children[
          this.$refs.toolbar.getIndexes()[1]
        ].text
      );
      this.ValLiner = `${val[0]} - ${val[1]} `;
      this.mouseshow = false;
    },
    dlClick(ind) {
      this.ind = ind;
      Dialog.confirm({
        title: "确认提示",
        message: "您确定使用此地址吗？",
      })
        .then(() => {
          this.shrpLongitude = this.shuerArr[ind].longitude;
          this.shrpLatitude = this.shuerArr[ind].latitude;
          this.shuerArr[ind].shrpLongitude = this.shuerArr[ind].longitude;
          this.shuerArr[ind].shrpLatitude = this.shuerArr[ind].latitude;
          this.username = this.shuerArr[ind].KaUabLinker;
          this.userphone = this.shuerArr[ind].KaUabTel;
          this.province = this.shuerArr[ind].KaUabProvince;
          this.cityS = this.shuerArr[ind].KaUabCity;
          this.area = this.shuerArr[ind].KaUabArea;
          this.receiveAddress = `${this.shuerArr[ind].PROVINCENAME} ${this.shuerArr[ind].CITYNAME} ${this.shuerArr[ind].AREANAME}`;
          this.melinaddress = this.shuerArr[ind].KaUabDes;
          this.receive[0] = {
            name: this.shuerArr[ind].PROVINCENAME,
            code: this.shuerArr[ind].KaUabProvince,
          };
          this.receive[1] = {
            name: this.shuerArr[ind].CITYNAME,
            code: this.shuerArr[ind].KaUabCity,
          };
          this.receive[2] = {
            name: this.shuerArr[ind].AREANAME,
            code: this.shuerArr[ind].KaUabArea,
          };
          window.sessionStorage.removeItem("FAddress");
          window.sessionStorage.removeItem("deliverClick");

          // window.sessionStorage.setItem(
          //   "deliver",
          //   JSON.stringify(this.shuerArr[ind])
          // );
          // window.sessionStorage.setItem(
          //   "deliver_checkArr",
          //   JSON.stringify(this.checkArr)
          // );
          // if (this.$router.history.current.query.state == 1) {
          //   this.$router.push({
          //     path: "/details",
          //     query: { orderId: this.$router.history.current.query.orderId }
          //   });
          // } else {
          //   this.$router.push({
          //     path: "/addList",
          //     query: this.$router.history.current.query
          //   });
          // }
        })
        .catch(() => {
          this.ind = null;
        });
    },
    onclick(val) {
      let Arr = this.checkArr.filter((item) => item == val);
      if (!Arr.length) {
        this.checkArr.push(val);
      } else {
        this.checkArr.forEach((item, i) => {
          if (item == val) {
            if (
              JSON.parse(
                sessionStorage.getItem("feed") &&
                  JSON.parse(sessionStorage.getItem("feed")).TabArr[0] ==
                    "精拼报价" &&
                  val == "需要提货"
              )
            ) {
            } else {
              this.checkArr.splice(i, 1);
            }
          }
        });
      }
      if (!this.checkArr.filter((item) => item == "需要提货").length) {
        this.timerStart = "";
        this.timerEnd = "";
      }
      console.log(this.checkArr);
    },
    city() {
      this.show = !this.show;
    },
    onOK() {
      if (this.username == "") {
        Toast("姓名不能为空");
      } else if (this.userphone == "") {
        Toast("手机号不能为空");
      } else if (this.receiveAddress == "") {
        Toast("请选择省市区");
      }
      else if((this.timerStart !='' ? this.timerEnd == '' : true || this.timerEnd ? this.timerStart == '' : true) && this.checkArr.filter(item => item == '需要提货').length){
        Toast("请将期望上门时间补充完整!");
      }
      else if(this.timerStart!= '' && this.timerEnd!= '' && this.timerStart.split('-')[2].split(' ')[0] != this.timerEnd.split('-')[2].split(' ')[0] && this.checkArr.filter(item => item == '需要提货').length){
        Toast("选择期望上门时间不得超过当天时间段!");
      } else if (this.melinaddress == "") {
        Toast("请将详细地址补充完整");
      } else {
        let formdata = new FormData();
        formdata.append("KaUabLinker", this.username);
        formdata.append("KaUabTel", this.userphone);
        formdata.append("KaUabType", 1);
        formdata.append(
          "KaUserId",
          this.$router.history.current.query.kauserId
        );
        formdata.append("KaUabDes", this.melinaddress);
        formdata.append("KaUabProvince", this.province);
        formdata.append("KaUabCity", this.cityS);
        formdata.append("KaUabArea", this.area);
        formdata.append("KaUabStatus", 1);
        formdata.append("longitude", this.shrpLongitude);
        formdata.append("latitude", this.shrpLatitude);
        operationadress(formdata).then((res) => {
          this.setVal();
          if (this.$router.history.current.query.state == 1) {
            this.$router.push({
              path: "/details",
              query: { orderId: this.$router.history.current.query.orderId },
            });
          } else {
            this.$router.go(-1);
          }
        });
      }
    },
    receiveconfirm(val) {
      this.show = false;
      this.receive = val;
      this.data.cneeProvinceCode = this.receive[0].code;
      this.data.cneeCityCode = this.receive[1].code;
      this.data.cneeAreaCode = this.receive[2].code;
      this.receiveAddress = `${this.receive[0].name} ${this.receive[1].name} ${this.receive[2].name}`;
      console.log(this.receiveAddress);
    },
    setVal() {
      window.sessionStorage.setItem(
        "deliver",
        JSON.stringify({
          KaUabLinker: this.username,
          KaUabTel: this.userphone,
          KaUabType: 1,
          KaUserId: this.$router.history.current.query.kauserId,
          KaUabDes: this.melinaddress,
          PROVINCENAME: this.receive.length
            ? this.receive[0].name
            : JSON.parse(window.sessionStorage.getItem("deliver")).PROVINCENAME,
          CITYNAME: this.receive.length
            ? this.receive[1].name
            : JSON.parse(window.sessionStorage.getItem("deliver")).CITYNAME,
          AREANAME: this.receive.length
            ? this.receive[2].name
            : JSON.parse(window.sessionStorage.getItem("deliver")).AREANAME,
          KaUabArea: this.area,
          KaUabCity: this.cityS,
          KaUabProvince: this.province,
          KaUabStatus: 1,
          KaAppointmentStart: this.timerStart,
          KaAppointmentEnd: this.timerEnd,
          shrpLongitude: this.shrpLongitude,
          shrpLatitude: this.shrpLatitude,
          shortDeptId: this.deptId || "",
          shortStationId: this.stationId || "",
          shortDeptName: this.deptIdName || "",
          shortStationName: this.stationIdName || "",
        })
      );
      window.sessionStorage.setItem(
        "deliver_checkArr",
        JSON.stringify(this.checkArr)
      );
    },
    btntxt() {
      this.show = false;
    },
    receivecancel() {
      this.arryReceiveList = JSON.parse(JSON.stringify(AreaList));
      this.show = false;
      console.log(this.mouseshow)
      this.mouseshow = false;
    },
    changeArea(picker, index, value) {
      console.log(picker);
      console.log(index);
      console.log(value);
      this.province = index[0].code;
      this.cityS = index[1].code;
      this.area = index[2].code;
      // console.log(item);
      if (value == 0) {
        this.getcities(index[0].code);
      } else if (value == 1) {
        this.getareas(index[1].code);
      }
    },
    getcities(code) {
      cities(code).then((res) => {
        let that = this;

        // debugger;
        let cityList = that[that.selectedAddItem].city_list;

        //将获取到的城市 格式化成{110000000000:北京}的格式
        if (res.code == 200) {
          cityList = {};
          res.data.forEach((item) => {
            cityList[item.AreaId] = item.AreaName;
          });
          that.getareas(res.data[0].AreaId);
        }

        that[that.selectedAddItem]["city_list"] = cityList;
      });
    },
    getareas(code) {
      areas(code).then((res) => {
        let that = this;

        let countyList = that[that.selectedAddItem].county_list;

        //将获取到的城市 格式化成{110000000000:北京}的格式
        if (res.code == 200) {
          countyList = {};
          res.data.forEach((item) => {
            countyList[item.AreaId] = item.AreaName;
          });
        }

        that[that.selectedAddItem]["county_list"] = countyList;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  padding: 56px 0 67px 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow: scroll;
  .userinfo {
    font-size: 13px;
    display: flex;
    border-bottom: 0.5px solid #e5e5e5;
    input {
      padding: 15px 15px;
      box-sizing: border-box;
      border: 0;
      width: 50%;
    }
    // .phone {
    //   text-align: right;
    // }
  }
  .city {
    font-size: 13px;
    padding: 15px 15px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 0.5px solid #e5e5e5;
    color: #999999;
    dl {
      display: flex;
      justify-content: space-between;
      align-items: center;
      dd {
        img {
          width: 15px;
          height: 20px;
        }
      }
    }
  }
  .address {
    font-size: 13px;
    display: flex;
    // border-bottom: 0.5px solid #e5e5e5;
    input {
      padding: 15px 15px;
      box-sizing: border-box;
      border: 0;
      width: 100%;
    }
  }
  .listOrder {
    color: #f18d00;
    font-size: 14px;
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: right;
    background: #fff;
  }
  .box_added {
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 10px;
    .uls {
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      font-size: 15px;
      dl {
        overflow-y: hidden;
        padding: 15px 0px;
        box-sizing: border-box;
        border-top: 1px solid #efefef;
      }
      .active {
        border: 0.5px solid #f18d00;
        color: #f18d00;
        background: #fffaf2;
      }
    }
    .tit {
      font-size: 14px;
      // padding-bottom: 5px;
      // box-sizing: border-box;
      line-height: 32px;
    }
    .checkSteper {
      padding: 0 0 10px 0;
      box-sizing: border-box;
      font-size: 15px;
      background: #fff;
      box-sizing: border-box;
      ul {
        dl {
          overflow: hidden;
        }
        display: flex;
        li {
          border: 1px solid #f3f3f3;
          color: #666666;
          width: 100px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          margin-right: 18px;
          background: #f3f3f3;
          border-radius: 4px;
        }
        .active {
          border: 0.5px solid #f18d00;
          color: #f18d00;
          background: #fffaf2;
        }
      }
    }
  }
  .buton {
    padding: 8px 15px;
    box-sizing: border-box;
    display: flex;
    border-radius: 5px;
    justify-content: space-around;
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .butonT {
      background: #f18d00;
      width: 100%;
      // width: 328px;
      height: 44px;
      border: 1px solid #f18d00;
    }
  }
  .shell {
    background: #ffffff;
    border: 0.5px solid #f18d00;
    border-radius: 4px;
    color: #666666;
  }
}
.warn {
  .warn_title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .borliner {
    height: 30px;
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
    font-size: 13px;
  }
  .warn_count {
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      input {
        padding: 10px 0px;
        box-sizing: border-box;
        font-size: 14px;
        text-align: center;
        width: 160px;
        height: 30px;
        background: #ffffff;
        border: 1px solid #ccc;
        // border-radius: 4px;
      }
      margin-bottom: 10px;
    }
  }
}
.sure-btn {
  width: 343px;
  height: 44px;
  line-height: 44px;
  margin: 10px auto;
  font-size: 18px;
  text-align: center;
  color: #fff;
  background: #f18d00;
  border-radius: 4px;
}
/deep/.van-picker-column__wrapper li{
  height:44PX;/*no*/
}
// /deep/.van-picker-column__item {
//   height: 40px;
// }
</style>